<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 搜索部分 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">统计报表</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <div class="form_div">
            <div>时间范围：</div>
            <div>
              <el-date-picker
                value-format="yyyy-MM-dd hh:mm:ss"
                v-model="form.setTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
            <div style="text-align: center">至</div>
            <div>
              <el-date-picker
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                v-model="form.endTime"
              ></el-date-picker>
            </div>
          </div>
          <div>
            <el-button
              size="small"
              @click="searchInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >搜 索</el-button
            >
            <el-button
              size="small"
              @click="resettingInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="main-el-row-content">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="showData"
          style="width: 100%"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
          ref="multipleTable"
          :cell-class-name="tableCellClassName"
        >
          <el-table-column type="index" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column
            prop="tableName"
            label="数据名称"
            min-width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column label="接引数据" align="center">
            <el-table-column
              prop="oriBgnDt"
              min-width="200"
              label="开始时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="oriEndDt"
              min-width="200"
              label="结束时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="oriCounts"
              min-width="100"
              label="接引量"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="治理数据" align="center">
            <el-table-column
              prop="govBgnDt"
              min-width="200"
              label="开始时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="govEndDt"
              min-width="200"
              label="结束时间"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="govCounts"
              min-width="100"
              label="接引量"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="质量评估" align="center">
            <el-table-column
              prop="consistency"
              min-width="100"
              label="一致性"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="completeness"
              min-width="100"
              label="完整性"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="accuracy"
              min-width="100"
              label="准确性"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="effectiveness"
              min-width="100"
              label="有效性"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="uniqueness"
              min-width="100"
              label="唯一性"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="score"
              min-width="100"
              label="得分"
              align="center"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="div-el-pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            background
            layout="prev, pager, next, total, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { post } from "../../utils/request";
export default {
  name: "statisticalReport",
  data() {
    return {
      showData: [], // 后台获取的数据放这
      pageSize: 9, // 一页多少条数据
      pageNum: 1, // 分页的第几页
      loading: true, // 加载
      total: null, // 获取所有数据
      form: {
        setTime: "", // 搜索的开始时间
        endTime: "", // 搜索的结束时间
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getDataStatisticsList();
    },
    getDataStatisticsList() {
      let params = {
        bgnDt: "",
        endDt: "",
        orderByColumn: "string",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      post("/api/idatamanage/dataGov/queryDataStatisticsList", params).then(
        (res) => {
          console.log(res);
          this.showData = res.data.data;
          this.total = res.data.data.length;
          this.loading = false;
        }
      );
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    handleCurrentChange(pageNum) {
      this.listLoading = true;
      this.pageNum = pageNum;
      //   console.log(this.pageNum); //点击第几页
      this.getDataStatisticsList();
    },
    ComplementZero(res) {
      if (res < 10) {
        return "0" + res;
      } else {
        return res;
      }
    },
    searchInfo() {
      this.loading = true;
      if (this.form.setTime && this.form.endTime) {
        if (this.form.setTime < this.form.endTime) {
          this.getDataStatisticsList();
        } else {
          this.$message("时间范围错误");
          this.loading = false;
        }
      } else {
        const date = new Date().getTime();
        const bgnDate = new Date(date), // 结束时间
          bgnY = bgnDate.getFullYear() + "-",
          bgnM = this.ComplementZero(bgnDate.getMonth() + 1) + "-",
          bgnD = this.ComplementZero(bgnDate.getDate()) + " ",
          bgnh = this.ComplementZero(bgnDate.getHours()) + ":",
          bgnm = this.ComplementZero(bgnDate.getMinutes()) + ":",
          bgns = this.ComplementZero(bgnDate.getSeconds());
        const bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;

        const halfYear = (365 / 2) * 24 * 3600 * 1000;
        const pastResult = date - halfYear;
        const pastDate = new Date(pastResult), // 开始时间
          endY = pastDate.getFullYear() + "-",
          endM = this.ComplementZero(pastDate.getMonth() + 1) + "-",
          endD = this.ComplementZero(pastDate.getDate()) + " ",
          endh = this.ComplementZero(pastDate.getHours()) + ":", //获取当前小时数(0-23)
          endm = this.ComplementZero(pastDate.getMinutes()) + ":", //获取当前分钟数(0-59)
          ends = this.ComplementZero(pastDate.getSeconds()); //获取当前秒数(0-59)
        const endTime = endY + endM + endD + endh + endm + ends; // 默认获取一年前 到现在的数据
        this.form.setTime = endTime;
        this.form.endTime = bgnTime;
        this.getDataStatisticsList();
      }
    },
    resettingInfo() {
      this.loading = true;
      this.form.setTime = "";
      this.form.endTime = "";
      this.getDataStatisticsList();
    },
  },
};
</script>
  <style src="../../assets/css/common.css"></style>
  <style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;
}

::v-deep .el-table__fixed-right::before {
  background: transparent !important;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background: transparent !important;
}

::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #84f2ff !important;
}
// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #fff;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

.el-dialog {
  background-color: rgba(8, 79, 140, 1);
}

::v-deep .el-input__icon {
  line-height: 32px;
}
::v-deep .el-table--border,
.el-table--group {
  border: none;
}
::v-deep .el-table--border .el-table__cell {
  border-top: 1px solid #ebeef5;
  font-size: 14px;
}
::v-deep .el-button + .el-button {
  margin: 0;
}
.title_table {
  color: #84f2ff;
  font-size: 18px;
}
</style>